<template>
    <van-popup :show="show" position="bottom" @close="closePopup" @click-overlay="closePopup">
        <van-picker-group
            title="选择日期"
            :tabs="['选择日期', '选择时间']"
            @confirm="confirm"
            @cancel="closePopup"
            next-step-text="下一步"
        >
            <van-date-picker
                :modelValue="currentDate"
                :min-date="minDate"
                :max-date="maxDate"
            />
            <van-time-picker
                :modelValue="currentTime"  
                :min-hour="minHour"
                :max-hour="maxHour"
                :min-minute="minMinute"
                :max-minute="maxMinute" 
            />
        </van-picker-group>
    </van-popup>
</template>

<script setup lang='ts'>

function dateFormat(fmt: string, date: string|Date): string {
  let ret;
  date = new Date(date);
  const opt: {[propName: string]: string} = {
    "Y+": date.getFullYear().toString(), // 年
    "m+": (date.getMonth() + 1).toString(), // 月
    "d+": date.getDate().toString(), // 日
    "H+": date.getHours().toString(), // 时
    "M+": date.getMinutes().toString(), // 分
    "S+": date.getSeconds().toString() // 秒
    // 有其他格式化字符需求可以继续添加，必须转化成字符串
  };
  for (let k in opt) {
    ret = new RegExp("(" + k + ")").exec(fmt);
    if (ret) {
      fmt = fmt.replace(
        ret[1],
        ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
      )
    }
  }
  return fmt;
};


const emit = defineEmits<{
    (e: 'update:current-date', value: Date|string): void;
    (e: 'update:current-time', value: Date|string): void;
    (e: 'update:show', show: boolean): void;
    (e: 'confirm', value: Date|string): void;
}>()

const props = defineProps({
    type: {
        type: String,
        default: 'datetime'
    },
    minDate: {
        default: () => new Date(new Date().getFullYear()-3, 1, 1)
    },
    maxDate: {
        default: () => new Date(new Date().getFullYear()+3, 12, 31)
    },
    minHour: {
        type: Number,
        default: 0
    },
    maxHour: {
        type: Number,
        default: 23
    },
    minMinute: {
        type: Number,
        default: 0
    },
    maxMinute: {
        type: Number,
        default: 59
    },
    show: {
        type: Boolean,
        default: false,
    },
    // 传入的日期
    currentDate: {
        default: () => []
    },
    currentTime: {
        default: () => []
    },
})

function formatter(type: string, value: string){
    if(type === 'year'){
        return `${value}年`
    }else if(type === 'month'){
        return `${value}月`
    }else if(type === 'day'){
        return `${value}日`
    }
    return value
}
function closePopup() {
    emit('update:show', false)
}
function cancel() {
    closePopup()
}
    // 点击确定按钮
function confirm(val: Date|string){
    closePopup()
    let value
    let type = props.type
    if(type === 'datetime'){
        value = dateFormat('YYYY-mm-dd HH:MM:SS', val)
    }else if(type === 'date'){
        value = dateFormat('YYYY-mm-dd', val)
    }else if(type === 'time'){
        value = dateFormat('HH:MM:SS', val)
    }else{
        value = val
    }
    emit('confirm', value)
    emit('update:current-date', value)
}

</script>